<template>
	<view>
		<div style="margin-top: 10rpx;">
			<u-search placeholder="请输入车票号,姓名或电话" @search="search()" v-model="keyword"></u-search>
		</div>
		<view class="body" <view style="width: 95%;">
			<u-tabs-swiper ref="uTabs" :list="list" :current="current" @change="tabsChange" :is-scroll="false"
				swiperWidth="100%"></u-tabs-swiper>
		</view>
		<view class="body">
			<u-button style="margin-top: 20rpx;" shape="square">接车</u-button>
		</view>
		<swiper style="height: 800rpx;" :current="swiperCurrent" @transition="transition"
			@animationfinish="animationfinish">

			<swiper-item class="swiper-item">
				<view v-for="(item, index) in tabs" :key="index">
					<!-- <u-card :title="item.title" :sub-title="item.subTitle" :thumb="item.thumb">
						<view class="" slot="foot">
							<u-icon name="chat-fill" size="34" color="" label="30评论"></u-icon>
						</view>
					</u-card> -->
					<view style="background-color: #0000FE;margin-top: 20rpx;">研发中</view>
				</view>


			</swiper-item>
		</swiper>

	</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				keyword: '',
				list: [{
					name: '全部'
				}, {
					name: '进行中'
				}, {
					name: '结算中'
				}, {
					name: '已完成'
				}],
				// 因为内部的滑动机制限制，请将tabs组件和swiper组件的current用不同变量赋值
				current: 0, // tabs组件的current值，表示当前活动的tab选项
				wiperCurrent: 0, // swiper组件的current值，表示当前那个swiper-item是活动的
				tabs: [{
					title: '11',
					subTitle: '2020-05-15',
					thumb: 'http://pic2.sc.chinaz.com/Files/pic/pic9/202002/hpic2119_s.jpg'
				}, {
					title: '22，笔锋浓转淡',
					subTitle: '2020-05-15',
					thumb: 'http://pic2.sc.chinaz.com/Files/pic/pic9/202002/hpic2119_s.jpg'
				}, {
					title: '33，笔锋浓转淡',
					subTitle: '2020-05-15',
					thumb: 'http://pic2.sc.chinaz.com/Files/pic/pic9/202002/hpic2119_s.jpg'
				}, {
					title: '44，笔锋浓转淡',
					subTitle: '2020-05-15',
					thumb: 'http://pic2.sc.chinaz.com/Files/pic/pic9/202002/hpic2119_s.jpg'
				}, ]
			}
		},
		onLoad() {

		},
		methods: {
			search() {
				console.log('search: ' + this.keyword)
			},
			change(index) {
				this.current = index;
			}, // tabs通知swiper切换
			tabsChange(index) {
				this.current = index;
			},
			// swiper-item左右移动，通知tabs的滑块跟随移动
			transition(e) {
				let dx = e.detail.dx;
				this.$refs.uTabs.setDx(dx);
			},
			// 由于swiper的内部机制问题，快速切换swiper不会触发dx的连续变化，需要在结束时重置状态
			// swiper滑动结束，分别设置tabs和swiper的状态
			animationfinish(e) {
				let current = e.detail.current;
				this.$refs.uTabs.setFinishCurrent(current);
				this.swiperCurrent = current;
				this.current = current;
			},
			// scroll-view到底部加载更多
			onreachBottom() {

			},
			swiperCurrent() {

			}
		}
	}
</script>

<style scoped lang="scss">
	.u-card-wrap {
		background-color: $u-bg-color;
		padding: 1px;
	}

	.u-body-item {
		font-size: 32rpx;
		color: #333;
		padding: 20rpx 10rpx;
	}

	.u-body-item image {
		width: 120rpx;
		flex: 0 0 120rpx;
		height: 120rpx;
		border-radius: 8rpx;
		margin-left: 12rpx;
	}

	.body {
		text-align: center;
		margin-top: 10rpx;
	}
</style>
